<template>
  <div class="risk-assessment">
    <h3>风险评估</h3>
    <div class="risk-container">
      <div class="risk-intro">
        <p>请回答以下问题，帮助我们评估您的风险承受能力，以便为您提供更合适的投资建议。</p>
      </div>
      
      <div class="risk-questions" v-if="!assessmentCompleted">
        <div v-for="(question, index) in questions" :key="index">
          <div class="question-item" v-if="currentQuestionIndex === index">
            <div class="question-number">问题 {{ index + 1 }}/{{ questions.length }}</div>
            <div class="question-text">{{ question.text }}</div>
            <div class="question-options">
              <label 
                v-for="(option, optIndex) in question.options || []" 
                :key="optIndex"
                class="option-label"
                :class="{ 'selected': selectedOption === optIndex }"
                @click="selectOption(optIndex, option?.score || 0)"
              >
               <span class="option-text">{{ option?.text || '' }}</span>
              </label>
            </div>
          </div>
        </div>
        
        <div class="navigation-buttons">
          <button 
            class="nav-button prev-button" 
            :disabled="currentQuestionIndex === 0"
            @click="prevQuestion"
          >
            上一题
          </button>
          <button 
            class="nav-button next-button" 
            :disabled="selectedOption === null"
            @click="nextQuestion"
          >
            {{ currentQuestionIndex === questions.length - 1 ? '完成' : '下一题' }}
          </button>
        </div>
      </div>
      
      <div class="risk-result" v-else>
        <div class="result-header">
          <h4>风险评估结果</h4>
          <div class="risk-level" :class="riskLevelClass">
            {{ riskLevelText }}
          </div>
        </div>
        
        <div class="risk-score">
          <div class="score-label">您的得分：</div>
          <div class="score-value">{{ totalScore }}分</div>
        </div>
        
        <div class="risk-description">
          {{ riskLevelDescription }}
        </div>
        
        <div class="risk-recommendations">
          <h5>建议投资策略</h5>
          <ul>
            <li v-for="(rec, index) in riskRecommendations" :key="index">{{ rec }}</li>
          </ul>
        </div>
        
        <div class="risk-warning">
          <i class="icon-warning"></i>
          <span>投资有风险，入市需谨慎。本评估结果仅供参考，不构成投资建议。</span>
        </div>
        
        <button class="restart-button" @click="restartAssessment">
          重新评估
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

interface QuestionOption {
  text: string;
  score: number;
}

interface Question {
  text: string;
  options: QuestionOption[];
}

const questions: Question[] = [
  {
    text: '您的年龄段是？',
    options: [
      { text: '18-25岁', score: 5 },
      { text: '26-35岁', score: 4 },
      { text: '36-45岁', score: 3 },
      { text: '46-55岁', score: 2 },
      { text: '56岁以上', score: 1 }
    ]
  },
  {
    text: '您的投资经验如何？',
    options: [
      { text: '没有经验', score: 1 },
      { text: '1年以下', score: 2 },
      { text: '1-3年', score: 3 },
      { text: '3-5年', score: 4 },
      { text: '5年以上', score: 5 }
    ]
  },
  {
    text: '您能承受的最大投资亏损是多少？',
    options: [
      { text: '不能承受任何亏损', score: 1 },
      { text: '10%以内', score: 2 },
      { text: '10%-30%', score: 3 },
      { text: '30%-50%', score: 4 },
      { text: '50%以上', score: 5 }
    ]
  },
  {
    text: '您的投资目标是什么？',
    options: [
      { text: '保本为主', score: 1 },
      { text: '稳健增值', score: 2 },
      { text: '平衡风险和收益', score: 3 },
      { text: '追求较高收益', score: 4 },
      { text: '追求最大收益', score: 5 }
    ]
  },
  {
    text: '您的投资期限偏好是？',
    options: [
      { text: '随时可能需要使用资金', score: 1 },
      { text: '1年以内', score: 2 },
      { text: '1-3年', score: 3 },
      { text: '3-5年', score: 4 },
      { text: '5年以上', score: 5 }
    ]
  }
];

const currentQuestionIndex = ref(0);
const selectedOption = ref<number | null>(null);
const assessmentCompleted = ref(false);
const totalScore = ref(0);
const userAnswers = ref<number[]>(new Array(questions.length).fill(-1));

const riskLevelText = computed(() => {
  if (totalScore.value <= 5) return '保守型';
  if (totalScore.value <= 10) return '稳健型';
  if (totalScore.value <= 15) return '平衡型';
  if (totalScore.value <= 20) return '成长型';
  return '进取型';
});

const riskLevelClass = computed(() => {
  if (totalScore.value <= 5) return 'conservative';
  if (totalScore.value <= 10) return 'stable';
  if (totalScore.value <= 15) return 'balanced';
  if (totalScore.value <= 20) return 'growth';
  return 'aggressive';
});

const riskLevelDescription = computed(() => {
  switch (riskLevelText.value) {
    case '保守型':
      return '您是保守型投资者，优先考虑资金安全，对风险承受能力较低，适合投资低风险产品。';
    case '稳健型':
      return '您是稳健型投资者，能承受一定的风险，追求稳定的投资回报，适合配置中等风险产品。';
    case '平衡型':
      return '您是平衡型投资者，风险承受能力适中，寻求风险和收益的平衡，可以配置多种类型的投资产品。';
    case '成长型':
      return '您是成长型投资者，风险承受能力较强，追求较高的投资回报，可以承担一定的市场波动。';
    case '进取型':
      return '您是进取型投资者，风险承受能力很强，追求最大的投资回报，能够承受较大的市场波动。';
    default:
      return '';
  }
});

const riskRecommendations = computed(() => {
  switch (riskLevelText.value) {
    case '保守型':
      return [
        '建议配置70%以上的低风险产品，如国债、货币基金等',
        '少量配置蓝筹股和高评级债券',
        '避免投资高风险的股票和衍生品',
        '定期定额投资，分散风险'
      ];
    case '稳健型':
      return [
        '建议配置50%低风险产品，如债券基金、货币基金',
        '40%配置蓝筹股和价值型股票',
        '10%可配置成长型股票',
        '定期调整投资组合，保持风险平衡'
      ];
    case '平衡型':
      return [
        '建议配置40%低风险产品，如债券基金',
        '40%配置蓝筹股和成长型股票',
        '20%配置高风险高收益的投资品种',
        '适当参与市场热点，但保持投资分散'
      ];
    case '成长型':
      return [
        '建议配置30%低风险产品，保障基本收益',
        '50%配置成长型股票和科技股',
        '20%配置高风险高收益的投资品种',
        '关注新兴行业和成长潜力大的企业'
      ];
    case '进取型':
      return [
        '建议配置20%低风险产品作为安全垫',
        '60%配置成长型股票和科技股',
        '20%配置高风险高收益的投资品种，如创新企业、ETF等',
        '密切关注市场动态，灵活调整投资策略'
      ];
    default:
      return [];
  }
});

const selectOption = (index: number, score: number) => {
  selectedOption.value = index;
  userAnswers.value[currentQuestionIndex.value] = score;
};

const prevQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--;
    const prevAnswer = userAnswers.value[currentQuestionIndex.value] ?? -1;
    selectedOption.value = prevAnswer !== -1 ? prevAnswer : null;
  }
};

const nextQuestion = () => {
  if (currentQuestionIndex.value < questions.length - 1) {
    currentQuestionIndex.value++;
    const nextAnswer = userAnswers.value[currentQuestionIndex.value] ?? -1;
    selectedOption.value = nextAnswer !== -1 ? nextAnswer : null;
  } else {
    // 完成评估
    calculateTotalScore();
    assessmentCompleted.value = true;
  }
};

const calculateTotalScore = () => {
  totalScore.value = userAnswers.value.reduce((sum, score) => sum + score, 0);
};

const restartAssessment = () => {
  currentQuestionIndex.value = 0;
  selectedOption.value = null;
  assessmentCompleted.value = false;
  totalScore.value = 0;
  userAnswers.value = new Array(questions.length).fill(-1);
};
</script>

<style scoped>
.risk-assessment {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 18px;
}

.risk-intro {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  color: #34495e;
}

.risk-questions {
  margin-bottom: 20px;
}

.question-item {
  margin-bottom: 20px;
}

.question-number {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.question-text {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 16px;
  font-weight: 500;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-label {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
}

.option-label:hover {
  border-color: #3498db;
  background-color: #f8f9fa;
}

.option-label.selected {
  border-color: #3498db;
  background-color: #e3f2fd;
  color: #1976d2;
  font-weight: 500;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.nav-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.prev-button {
  background-color: #f1f1f1;
  color: #555;
}

.prev-button:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.next-button {
  background-color: #3498db;
  color: white;
}

.next-button:hover:not(:disabled) {
  background-color: #2980b9;
}

.nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.risk-result {
  text-align: center;
}

.result-header {
  margin-bottom: 20px;
}

.result-header h4 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.risk-level {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  color: white;
}

.conservative {
  background-color: #95a5a6;
}

.stable {
  background-color: #3498db;
}

.balanced {
  background-color: #2ecc71;
}

.growth {
  background-color: #f39c12;
}

.aggressive {
  background-color: #e74c3c;
}

.risk-score {
  margin-bottom: 20px;
  font-size: 18px;
}

.score-label {
  color: #7f8c8d;
  margin-bottom: 8px;
}

.score-value {
  font-size: 36px;
  font-weight: bold;
  color: #2c3e50;
}

.risk-description {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  margin: 20px auto;
  max-width: 600px;
  color: #34495e;
  line-height: 1.6;
}

.risk-recommendations {
  margin: 20px auto;
  max-width: 600px;
  text-align: left;
}

.risk-recommendations h5 {
  color: #2c3e50;
  margin-bottom: 12px;
  text-align: center;
}

.risk-recommendations ul {
  list-style-type: disc;
  padding-left: 20px;
  color: #34495e;
  line-height: 1.8;
}

.risk-warning {
  background-color: #fff3cd;
  padding: 12px;
  border-radius: 6px;
  margin: 20px auto;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #856404;
  font-size: 14px;
}

.restart-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.restart-button:hover {
  background-color: #2980b9;
}
</style>